<div [@routerTransition]>
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto col-xs-6">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>车间问题域</span>
                </h3>
                <span class="m-section__sub">
                    车间问题域的文本头信息
                </span>
            </div>
            <div class="col-xs-6 text-right"></div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <p>
                    <span class="m-badge m-badge--success"> </span
                    >自动执行&nbsp;&nbsp;&nbsp;&nbsp;
                    <span class="m-badge m-badge--danger m-badge--wide">
                        <font style="vertical-align: inherit;">
                            <font style="vertical-align: inherit;">
                                异常处理
                            </font>
                        </font> </span
                    >&nbsp;&nbsp;&nbsp;&nbsp;
                    <span class="m-badge m-badge--danger m-badge--dot"></span
                    >&nbsp;异常处理流程
                </p>
                <div class="row align-items-center">
                    <div
                        class="primeng-datatable-container"
                        [busyIf]="primengTableHelper.isLoading"
                    >
                        <div
                            class="m-stack m-stack--ver m-stack--general m-stack--demo"
                            *ngFor="let item of domains"
                        >
                            <div
                                class="m-stack__item  m-stack__item--center m-stack__item--middle component-item "
                            >
                                <h5>
                                    <font style="vertical-align: inherit;">
                                        {{ item?.domainType }}({{
                                            item?.componentInfoDtos?.length
                                        }})
                                    </font>
                                </h5>
                            </div>

                            <!--  <div class="m-stack__item" *ngIf="item.componentInfoDtos.length==0">
                                <font style="vertical-align: inherit;">
                                    <font style="vertical-align: inherit;">

                                    </font>
                                </font>
                            </div> -->

                            <div class="m-stack__item">
                                <div class="row">
                                    <div
                                        class="col-md-3 col-xl-2 col-sm-6"
                                        *ngFor="
                                            let el of item.componentInfoDtos
                                        "
                                        style="margin: 5px 0;"
                                    >
                                        <div class="m-widget4 bg-secondary">
                                            <div class="m-widget4__item">
                                                <div class="m-widget4__info">
                                                    <span
                                                        class="m-widget4__title"
                                                    >
                                                        <font
                                                            [class.m--font-danger]="
                                                                !el.isNormal
                                                            "
                                                        >
                                                            {{ el?.actCode
                                                            }}{{ el?.actName }}
                                                        </font>
                                                        <span
                                                            class="m-badge m-badge--success"
                                                            *ngIf="
                                                                el.ifAutomatic
                                                            "
                                                        ></span>
                                                    </span>
                                                    <div
                                                        *ngIf="
                                                            !el?.actRole == ''
                                                        "
                                                    >
                                                        <span
                                                            class="m-widget4__sub"
                                                        >
                                                            <font
                                                                style="vertical-align: inherit;"
                                                            >
                                                                <font
                                                                    style="vertical-align: inherit;"
                                                                >
                                                                    <div
                                                                        class="m-demo-icon__preview"
                                                                    >
                                                                        <i
                                                                            class="flaticon-users"
                                                                        ></i>
                                                                        {{
                                                                            el?.actRole
                                                                        }}
                                                                    </div>
                                                                </font>
                                                            </font>
                                                        </span>
                                                    </div>
                                                    <div *ngIf="!el?.isNormal">
                                                        <div
                                                            *ngFor="
                                                                let ab of el.abnormalFlowDtos
                                                            "
                                                        >
                                                            <span
                                                                class="m-widget4__sub"
                                                            >
                                                                <font
                                                                    style="vertical-align: inherit;"
                                                                >
                                                                    <font
                                                                        style="vertical-align: inherit;"
                                                                    >
                                                                        <div
                                                                            class="m-demo-icon__preview"
                                                                        >
                                                                            <span
                                                                                class="m-badge m-badge--danger m-badge--dot"
                                                                            ></span
                                                                            >&nbsp;{{
                                                                                ab?.componentName
                                                                            }}
                                                                        </div>
                                                                    </font>
                                                                </font>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
